<template>
	<div>
		<div ref="amapRef" class="w-full h-full"></div>
	</div>
</template>

<script setup lang="ts">
import { useScript } from '/@/hooks/web/useScript';
const A_MAP_URL = 'https://webapi.amap.com/maps?v=2.0&key=999fec27d4e861c0c34fb4e8d5fdb948';
const amapRef = ref();
const { toPromise } = useScript({ src: A_MAP_URL });
const props = defineProps({
	latitude: {
		type: Number,
		default: 0,
	},
	longitude: {
		type: Number,
		default: 0,
	},
});
let map: any;
let AMap: any;
let marker: any;
async function initMap() {
	await toPromise();
	await nextTick();
	const wrapEl = unref(amapRef);
	if (!wrapEl) return;
	AMap = (window as any).AMap;
	map = new AMap.Map(wrapEl, {
		resizeEnable: true,
	});
	map.on('complete', () => {
		const ct = new AMap.LngLat(props.longitude, props.latitude);
		marker = new AMap.Marker({
			clickable: false,
			position: ct,
		});
		marker.setMap(map);
		marker.setPosition(ct);
		map.setCenter(ct);
	});
}
onUnmounted(() => {
	map && map.destroy();
});
defineExpose({
	initMap,
});
</script>

<style lang="scss" scoped>
:deep(.amap-marker-label) {
	color: #000;
	background: #00e400;
	border: unset;
	border-radius: 4px;
}
:deep(.amap-logo) {
	display: none !important;
}
:deep(.amap-copyright) {
	display: none !important;
}
</style>
